<template>
	<!--1.service:模块名，必传
		2.popb:弹窗显隐，必传
		3.aid:页面的id，必传
		4.sponsorMoney:打赏金额选项，可选
		5.sponsorMax:打赏最大金额，可选
		6.successFn:支付成的回调，可选
		<sponsor service="xxx" :aid="xxx" :sponsorMoney="xxx" :sponsorMax="xxx" :popb="sponsorb" :successFn="res=>{}" @closeFn="sponsorb=false"></sponsor> -->
	<view>
		<view class="sponsorPop" v-if="popb">
			<view class="sp-content" :style="`transform:scale(${popconb?1:0})`">
				<!-- 打赏选择 -->
				<block v-if="!sponsorSuccessb">
					<view class="content">
						<image :src="`${imgurl}sponsor_bgi.png?v=${imgVersion}`" mode="aspectFit" class="bgi_1"></image>
						<image :src="`${imgurl}sponsor.png?v=${imgVersion}`" mode="aspectFit" class="bgi_2"></image>
						<view class="title">
							<view>打赏支持</view>
							<text>喜欢就打赏支持一下{{service=='tieba'?'':'小编'}}吧</text>
						</view>
						<view class="sponsor">
							<view class="text">
								<text class="left">打赏金额</text>
								<view class="right">
									<text
										v-if="selfSponsorb">{{sponsorAmount<sponsorMax?'请输入你想打赏的金额，':`最多打赏${sponsorMax}${globalData.appConfig.currency ?  globalData.appConfig.currency.short : '元'}哦，`}}</text>
									<text class="tip" @click="linkTo(appConfig.protocol['打赏须知'])">打赏须知</text>
								</view>
							</view>
							<view class="list">
								<view :class="['item',{'active':item==sponsorAmount&&!selfSponsorb}]"
									v-for="(item,index) in sponsorMoney.slice(0,3)" :key="index"
									@click="sponsorFn(item)">
									<view class="txt">打赏</view>
									<view class="money"><text>{{ globalData.appConfig.currency ?  globalData.appConfig.currency.symbol : '￥' }}</text>{{item}}</view>
								</view>
								<view class="item" @click="sponsorFn()" v-if="!selfSponsorb">
									<view class="txt">打赏</view>
									<view class="money"><text>其他金额</text></view>
								</view>
								<view class="item active" v-else>
									<view class="money" style="display: flex;">
										<text :style="`padding-top:${paddTop};`">{{ globalData.appConfig.currency ?  globalData.appConfig.currency.symbol : '￥' }}</text>
										<input :type="globalData.platForm != 'mp-weixin' ? 'digit' : 'text'"  style="font-size: 44rpx;" v-model="sponsorAmount"
											@input="selfCheckFn" :focus="sponsorFocusb" @confirm="submitSponsorFn">
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="close" @click="closeFn">
						<image :src="`${imgurl}sponsor_close.png?v=${imgVersion}`" mode="aspectFit"></image>
					</view>
				</block>
				<!-- 打赏成功提示 -->
				<block v-else>
					<view class="success">
						<image :src="`${imgurl}coin.png?v=${imgVersion}`" mode="aspectFit"></image>
						<view class="right">
							<view class="tip">打赏成功！</view>
							<view class="text">感谢您的支持~</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<payBottom :service="service" action="pay" :payInfo="payInfo" :paypopb="paypopb" :loginCheck="false"
			apply="sponsor" @paypopb="paypopb=false" @payError="payError" @paySuccess="paySuccess">
		</payBottom>
	</view>
</template>

<script>
	var app = getApp();
	import webPages from '../../pages/webPages.json';
	var _this;
	export default {
		name: "sponsor",
		props: {
			service: {
				type: String,
				default: ''
			},
			popb: {
				type: Boolean,
				default: false
			},
			aid: {
				type: [Number, String],
				default: 0,
			},
			sponsorMoney: {
				type: Array,
				default: [6.6, 8.8, 68]
			},
			sponsorMax: {
				type: Number,
				default: 2000
			},
			successFn: { //三个值：1:默认提示+自定义操作，2:仅自定义操作
				type: Function,
				default: res => {
					return 1
				}
			}
		},
		data() {
			return {
				globalData:app.globalData,
				sponsorAmount: 0, //赞助金额
				preAmount: 0, //赞助金额修改之前的金额
				appConfig: '', //打赏须知跳转链接
				selfSponsorb: false, //自定义打赏金额
				sponsorFocusb: false, //自定义打赏聚焦
				sponsorSuccessb: false, //打赏成功弹窗
				popconb: false,
				imgVersion: app.globalData.imgVersion,
				imgurl: app.globalData.imgPath + '/article/',
				// 组件数据
				paypopb: false,
				payInfo: {},
				pages: {},
				// 兼容项
				platForm: app.globalData.platForm,
				paddTop: '0rpx'
			}
		},
		mounted() {
			_this = this;
			if (app.globalData.appConfig) {
				_this.appConfig = app.globalData.appConfig;
			} else {
				app.watchG('appConfig', function(value) {
					_this.appConfig = value;
				});
			}
			// 平台切换
			if (_this.platForm == 'web') {
				_this.paddTop = '20rpx';
			} else if (_this.platForm == 'mp-toutiao') {
				_this.paddTop = '14rpx';
			} else {
				_this.paddTop = '10rpx';
			}
			//页面路径
			_this.pages = app.pageFn(webPages);
		},
		methods: {
			linkTo(url) { //跳转
				if (url) {
					if (this.platForm == 'web') { //H5
						if (url.indexOf('http') > -1 || window.appBoolean) {
							location.href = url;
						} else {
							uni.navigateTo({
								url: url
							});
						}
					} else { //小程序
						uni.navigateTo({
							url: url.indexOf('http') > -1 ? '/pages/redirect/index?url=' + encodeURIComponent(
								url) : url
						})
					}
				}
			},
			sponsorFn(item) { //赞赏类型选择定额/自定义
				if (_this.platForm != 'web' && !app.loginCheck()) { //小程序且未登录
					return false
				}
				if (item) {
					_this.sponsorAmount = item; //金额
					_this.selfSponsorb = false;
					_this.sponsorFocusb = false;
					_this.submitSponsorFn(); //提交
				} else {
					_this.sponsorAmount = 1; //金额重置
					_this.selfSponsorb = true; //自定义模式
					_this.sponsorFocusb = true; //聚焦
				}
			},
			selfCheckFn(e) { //自定义赞赏检查
				let value = e.detail.value;
				let rule = /^(\d*|\d*[.]|\d*[.]\d{1,2})$/; //非负/整数/最多两位小数
				if (rule.test(value) || value == '') {
					if (value > _this.sponsorMax) {
						let time;
						time = setTimeout(res => {
							clearTimeout(time);
							_this.sponsorAmount = _this.sponsorMax;
						}, 100)
						_this.preAmount = _this.sponsorMax;
					} else {
						_this.preAmount = value;
					}
				} else {
					let time;
					time = setTimeout(res => {
						clearTimeout(time);
						_this.sponsorAmount = _this.preAmount;
					}, 100)
				}
			},
			submitSponsorFn() {
				let data = {
					service: _this.service,
					action: 'reward',
					aid: _this.aid,
					amount: _this.sponsorAmount
				};
				_this.$ajax.post({
					url: app.encodeUrl('include/ajax.php?'),
					data: data
				}).then(res => {
					if (res.data.state == 100) {
						if (app.globalData.platForm == 'web' && window.Android && window.appBoolean) {
							window.setupWebViewJavascriptBridge(function(bridge) {
								bridge.callHandler('cashier', {
									'service': _this.service,
									'module': _this.service,
									'type': '',
									'orderinfo': res.data.info,
									'ordertype': 'action=pay'
								}, function(responseData) {
									//返回ok，需要刷新页面
									if (responseData == 'ok') {
										bridge.callHandler('pageReload', {}, function(
											responseData) {}); //刷新页面
									} else if (responseData == 'end_countdown') {
										//后期增加判断支付的业务，像充值、打赏、升级等操作，不需要对页面有任何操作
										alert('支付超时！');
									}
								});
							});
						} else {
							_this.payInfo = res.data.info;
							_this.paypopb = true;
						}
					} else {
						_this.info = res.data.info;
					}
				})
			},
			closeFn() {
				_this.$emit('closeFn', false)
			},
			paySuccess(info) { //支付完成（失败或者成功）
				let state = _this.successFn(_this.payInfo);
				if (state == 2) { //仅操作
					callBack();
					return false
				}
				_this.sponsorSuccessb = true;
				setTimeout(res => {
					callBack();
					//交易成功/失败提示网站
					// let url =
					// `${_this.pages.payreturn}?ordernum=${_this.payInfo.ordernum}&module=${_this.service}`;
					// _this.linkTo(this.platForm == 'web' && window.appBoolean ?
					// 	`${app.globalData.masterDomain+window.pathname+url}` : url);
				}, 3000)

				function callBack() {
					_this.closeFn();
					_this.sponsorAmount = ''; //赞助金额
					_this.preAmount = ''; //赞助金额修改之前的金额
					_this.selfSponsorb = false; //自定义打赏金额
					_this.sponsorFocusb = false; //自定义打赏聚焦
					_this.sponsorSuccessb = false; //打赏成功弹窗
					_this.paypopb = false;
				}
			},
			payError(info) {
				uni.showToast({
					title: info,
					icon: 'none',
					success: res => {
						setTimeout(res => {
							uni.hideToast();
						}, 3000)
					}
				})
			},
		},
		watch: {
			popb(newVal, oldVal) {
				if (newVal) {
					setTimeout(res => {
						_this.popconb = true;
					}, 0)
				} else {
					_this.popconb = false;
				}
			}
		}
	}
</script>

<style>
	@import url("sponsor.css");
</style>